import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: CustomScrollViewTestRoute(),
    ));

class CustomScrollViewTestRoute extends StatefulWidget {
  @override
  _CustomScrollViewTestRouteState createState() => _CustomScrollViewTestRouteState();
}

class _CustomScrollViewTestRouteState extends State<CustomScrollViewTestRoute> {
  var _showNarrow = false;
  var _oldShowState = false;
  var _scrollController = ScrollController();

  bool _onNotification(ScrollNotification notification) {
    print("_scrollController.offset == $_scrollController.offset");

    bool show = _scrollController.offset > 100;
    if (show != _oldShowState) {
      _oldShowState = show;
      setState(() {
        _showNarrow = show;
      });
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: NotificationListener(
        onNotification: _onNotification,
        child: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            //AppBar，包含一个导航栏
            SliverAppBar(
//            title: Container(
//              height: 30,
//              width: 200,
//              color: Colors.red,
//            ),
//            leading: Icon(Icons.star),
              actions: <Widget>[
                Icon(Icons.star),
                SizedBox(
                  width: 10,
                ),
                Container(
                  child: Icon(Icons.message),
                  margin: EdgeInsets.only(right: 30),
                ),
              ],
              pinned: true,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                titlePadding: EdgeInsets.only(
                  left: 72.0,
                  bottom: 13.0,
                ),
                title: Container(
//                margin: EdgeInsets.only(top: 50),
                  height: 30,
                  width: 200,
                  color: Colors.red,
                ),
                background: Image.asset(
                  "assets/images/cover_img.jpg",
                  fit: BoxFit.cover,
                ),
              ),
            ),

            SliverPadding(
              padding: const EdgeInsets.all(8.0),
              sliver: new SliverGrid(
                //Grid
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, //Grid按两列显示
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 4.0,
                ),
                delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    //创建子widget
                    return new Container(
                      alignment: Alignment.center,
                      color: Colors.cyan[100 * (index % 9)],
                      child: new Text('grid item $index'),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ),
            //List
            new SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: new SliverChildBuilderDelegate((BuildContext context, int index) {
                //创建列表项
                return new Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: new Text('list item $index'),
                );
              }, childCount: 50 //50个列表项
                  ),
            ),
          ],
        ),
      ),
    );
  }
}
